<template>
  <!-- 方案规划导航栏 -->
   <div style="width: 100%;height: 100%;text-align: center;">

 
  <div style="display: inline-flex;width: 55%;height: 90%;text-align: center;">
        
    <div class="box">

      <div style="width: 100%;height: 25%;">
        <img style="height: 85px;height: 85px;margin-top: 1vh;" src="../../assets/images/yqc.png">
      </div>

      <div style="width: 100%;height: 10%;margin-top: 0vh;">
        <div class="titleCss">⻓管拖车输氢</div>   
      </div>

      <div style="width: 100%;height: 45%;margin-top: 2vh;">
                
        <el-form ref="form" label-position="right" :model="form" label-width="120px">
          <el-form-item label="单管水容积：">
            <el-input style="width: 90%;" v-model="form.name">
              <template slot="append">m³</template>
            </el-input>
          </el-form-item>
          <el-form-item label="每车管束数量(：">
            <el-input style="width: 90%;"  v-model="form.name">
              <template slot="append">个</template>
            </el-input>
          </el-form-item>
          <el-form-item label="拖车头单价：">
            <el-input style="width: 90%;"  v-model="form.name">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="管束单价：">
            <el-input style="width: 90%;"  v-model="form.name">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-form>

      </div>
      <div style="width: 100%;text-align:center;height: 10%;margin-top: 2vh;">
        <el-link @click="clickProject('load')" style="color: #409eff;font-size: 1vw;" type="primary">方案详情</el-link>
      </div>

    </div>

    <div class="box">

       
      <div style="width: 100%;height: 25%;">
        <img style="height: 85px;height: 85px;margin-top: 2vh;" src="../../assets/images/gd.png">
      </div>

      <div style="width: 100%;height: 10%;margin-top: 0vh;">
        <div class="titleCss">纯氢管道输氢</div>   
      </div>

      <div style="width: 100%;height: 45%;margin-top: 2vh;">
              
        <el-form ref="form" label-position="right" :model="form" label-width="120px">
          <el-form-item label="单管水容积：">
            <el-input style="width: 90%;" v-model="form.name">
              <template slot="append">km</template>
            </el-input>
          </el-form-item>
          <el-form-item label="每车管束数量：">
            <el-input style="width: 90%;"  v-model="form.name">
              <template slot="append">mm</template>
            </el-input>
          </el-form-item>
          <el-form-item label="管材单价：">
            <el-input style="width: 90%;"  v-model="form.name">
              <template slot="append">元/m</template>
            </el-input>
          </el-form-item>
          
        </el-form>

      </div>
      <div style="width: 100%;text-align:center;height: 10%;margin-top: 2vh;">
        <el-link @click="clickProject('load')" style="color: #409eff;font-size: 1vw;" type="primary">方案详情</el-link>
      </div>

    </div>  


  </div>

  
  <div>
      <el-button type="primary" @click="clickProject('load')" style="width: 110px">
          <span class="button-text">保存</span>
      </el-button>
    </div>

</div>
  
</template>

<script>
  export default {
    name: 'hydrogenProductionPathway',
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        activeDate: '',
        type: ''
      }
    },
    mounted: function() {
    
    },
    methods: {
      buttonClick : function(type,divId){
        for(var i = 1;i<=6;i++){
          $("#hpDiv"+i).css("background","#1f2c6c3b");
        }
        $("#"+divId).css("background","#409EFF");
        this.activeDate = new Date().getTime();
        //路由跳转
        //this.$router.push('/'+type)
      },
      youhua(){
        this.$http.post('/iepsapi/planProgram/planYH', {
          "project_id": this.projectId
        }).then((res) => {
          if (res.data.flag) {
            this.$message({
              type: 'success',
              message: res.data.message
            });
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    }
  }
</script>



<style>
  .el-form-item {
      margin-bottom: 5px;
  }
  .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 

  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #1f2c6c3b;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .box{
    width: 40vh;
    height: 50vh; 
    margin: auto;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>
